<template>
    <div class="study-report">
        <div class="xueqi">
            <span>学期</span>
            <a-select :value="parseInt(currentTermId)" style="width: 200px" @change="handleChange">
                <a-select-option :value="item.id" v-for="item in teamList" :key="item.id">
                    {{ item.title }}
                </a-select-option>
            </a-select>
        </div>
        <div class="report-title">
            <p>学习统计报告</p>
            <b></b>
            <span>统计范围：2024-07-10 至 2024-12-31</span>
        </div>
        <div class="report-box">
            <div class="jiben">
                <div class="retitle">
                    <span></span>
                    <p>基本情况</p>
                </div>
                <div class="infolist">
                    <div class="userinfo">
                        <div class="touxiang">
                            <img v-if="basicInfo.avatar" :src="`${basicInfo.avatar}`" alt="">
                            <img v-else src="../../../assets/images/touxiang.png" alt="">
                            <p>{{ basicInfo.student_name }}</p>
                        </div>
                        <div class="tongji">
                            <div class="tjitem">
                                <span>累计上课数</span>
                                <p>{{ basicInfo.attend_class_num || '0' }}</p>
                            </div>
                            <div class="tjitem">
                                <span>作品提交数量</span>
                                <p>{{ basicInfo.homework_num || '0' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="yikaitong">
                        <div class="retitle1">
                            <span></span>
                            <p>已开通课程包</p>
                        </div>
                        <div class="ktlist">
                            <li v-for="item in basicInfo.course_list" :key="item">{{ item }}</li>
                        </div>
                    </div>
                    <div class="renkebanji">
                        <div class="retitle1">
                            <span></span>
                            <p>任课老师及班级</p>
                        </div>
                        <div class="tealist">
                            <ul v-for="(item, index) in basicInfo.class_teacher" :key="index">
                                <li>{{ item.name }}</li>
                                <p>{{ item.title }}</p>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="biaoxian">
                <div class="retitle">
                    <span></span>
                    <p>个人班级表现统计</p>
                </div>
                <div class="table-box">
                    <a-table :columns="columns" :data-source="classScoreList" :rowKey="(row, index) => {return index;}" bordered>
                        <a slot="name" slot-scope="text">{{ text }}</a>
                    </a-table>
                </div>
            </div>
            <div class="zuoyepigai">
                <div class="retitle2">
                    <div class="re-left">
                        <span></span>
                        <p>作业批改统计</p>
                    </div>
                    <div class="re-right">
                        <span style="padding-right: 20px;">班级</span>
                        <a-select :value="parseInt(currentClassId)" style="width: 200px" @change="changeClass">
                            <a-select-option :value="item.id" v-for="item in classList" :key="item.id">
                                {{ item.title }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
                <div class="chartlist">
                    <div class="box1" id="canvas1"></div>
                    <div class="box2">
                        <div ref="chartContainer" style="height: 400px"></div>
                    </div>
                </div>
            </div>
            <div class="shangke">
                <div class="retitle">
                    <span></span>
                    <p>上课数量统计</p>
                </div>
                <ClassColumn :currentTermId="currentTermId" :studentNo="studentNo"></ClassColumn>
            </div>
        </div>
    </div>
</template>
<script>
import { Column, Pie } from '@antv/g2plot';
import ClassColumn from './classColumn.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '班级',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '平均分',
    dataIndex: 'avg_score',
    key: 'avg_score',
  },
  {
    title: '最高分',
    dataIndex: 'max_score',
    key: 'max_score',
  },
  {
    title: '学生学校',
    dataIndex: 'school_name',
    key: 'school_name',
  },
];

const teacherColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    scopedSlots: { customRender: 'index' },
  },
  {
    title: '班级',
    dataIndex: 'className',
    key: 'className',
  },
  {
    title: '班级平均分',
    dataIndex: 'average',
    key: 'average',
  },
  {
    title: '最高分',
    dataIndex: 'max',
    key: 'max',
  },
  {
    title: '学生学校',
    dataIndex: 'schoolName',
    key: 'schoolName',
  },
];

export default {
    name: 'studyReport',
    components: {
        ClassColumn
    },
    props: {
        port: {
            type: String,
            default: ''
        },
        studentNum: {
            type: String,
            default: ''
        }
    },
    computed: {
        imageUrl() {
            return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
        }
    },
    data() {
        return {
            columns,
            teacherColumns,
            teamList: [],
            classList: [],
            basicInfo: {},
            classScoreList: [],
            currentTermId: '0',
            currentClassId: '0',
            studentNo: '',
            chart: null,
            loading: true,
            piePlot: null,
        }
    },
    mounted() {
        if (this.port == 'teacher') {
            this.studentNo = this.studentNum;
        } else {
            const userInfo = JSON.parse(localStorage.getItem('userinfo'));
            this.studentNo = userInfo.student_no;  
        }
        this.initChart();
        this.getTermOptionList();
    },
    methods: {
        async initChart() {
            // 创建空图表容器
            this.chart = new Column(document.getElementById('canvas1'), {
                data: [],
                xField: 'range',
                yField: 'count',
                meta: {
                    range: { alias: '范围' },
                    count: { alias: '数量' }
                },
                label: {
                    position: 'middle',
                    style: { fill: '#fff' }
                },
                interactions: [{ type: 'element-active' }],
                loading: true // 初始显示加载状态
            });
            this.chart.render();
        },
        initPieChart(data) {
            if (this.piePlot) {
                this.piePlot.destroy();
            }
            this.piePlot = new Pie(this.$refs.chartContainer, {
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.8,
                label: {
                    type: 'spider',
                    content: '{name}\n{percentage}'
                },
                tooltip: {
                    formatter: (datum) => {
                        return { name: datum.type, value: datum.value };
                    }
                },
                interactions: [{ type: 'element-active' }],
                legend: {
                    position: 'bottom'
                }
            });
            this.piePlot.render();
        },
        handleChange(value) {
            console.log(`selected ${value}`);
            this.getClassOptionList(value);
            this.getBasicInfo(value);
            this.currentTermId = value;
        },
        changeClass(value) {
            console.log(`selected=== ${value}`);
            this.currentClassId = value;
            this.getScoreCountStat(this.currentTermId);
        },
        // 学期
        async getTermOptionList() {
            const res = await this.$request.get('api/report/term_option_list');
            console.log(res, 'res===');
            if (res.code == 1) {
                this.teamList = res.data || [];
                for (const team of this.teamList) {
                  if (team.current) {
                    this.currentTermId = String(team.id)
                  }
                }
                if (!parseInt(this.currentTermId)) {
                  this.currentTermId = String(this.teamList[0].id)
                }
                this.getClassOptionList(this.currentTermId);
                this.getBasicInfo(this.currentTermId);
                this.getScoreStat(this.currentTermId);
            }
        },
        // 班级
        async getClassOptionList(id) {
            const res = await this.$request.get(`api/report/banji_option_list?term_id=${Number(id)}&no=${this.studentNo}`);
            console.log(res, 'res===');
            if (res.code == 1) {
                this.classList = res.data || [];
                this.currentClassId = this.classList[0].id;
                this.getScoreCountStat();
            }
        },
        // 基本情况
        async getBasicInfo(id) {
            const res = await this.$request.get(`api/report/basic_info?term_id=${Number(id)}&no=${this.studentNo}`);
            console.log(res, 'res===');
            if (res.code == 1) {
                this.basicInfo = res.data || {};
            }
        },
        // 个人班级表现统计
        async getScoreStat(id) {
            const res = await this.$request.get(`api/report/banji_score_stat?term_id=${Number(id)}&no=${this.studentNo}`);
            console.log(res, 'res===');
            if (res.code == 1) {
                res.data.forEach((item, index) => {
                    item.index = index + 1;
                })
                this.classScoreList = res.data || [];
            }
        },
        // 学生作业批改统计
        async getScoreCountStat() {
            const res = await this.$request.get(`api/report/banji_score_count_stat?term_id=${Number(this.currentTermId)}&class_id=${this.currentClassId}&no=${this.studentNo}`);
            if (res.code == 1) {
                // this.pieData = res.data || [];
                const transformedData = res.data || [];
                this.updateChart(transformedData);
                const chartData = res.data.map(item => ({
                    type: item.range,  // 分类字段
                    value: item.count    // 数值字段
                }));
                this.initPieChart(chartData);
            }
        },
        updateChart(data) {
            if (!this.chart) return;
            // 更新图表数据
            this.chart.changeData(data);
            // 关闭加载状态（如果有）
            this.chart.update({ loading: false });
        },
    },
    beforeDestroy() {
        // 组件销毁时销毁图表实例
        if (this.chart) {
            this.chart.destroy();
        }
        if (this.piePlot) {
            this.piePlot.destroy();
        }
    },
}
</script>
<style lang="less" scoped>
.study-report{
    width: 100%;
    .xueqi{
        text-align: left;
        span{
            padding-right: 10px;
        }
    }
    .report-title{
        p{
            font-weight: 500;
            font-size: 24px;
            color: #1D2129;
            margin-bottom: 0px;
        }
        b{
            width: 70px;
            height: 6px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 7px;
            margin: 10px auto;
            display: block;
        }
        span{
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
        }
    }
    .report-box{
        .retitle{
            padding-bottom: 20px;
            border-bottom: 1px solid #E9E6F2;
            display: flex;
            align-items: center;
            span{
                width: 4px;
                height: 18px;
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                border-radius: 7px;
                display: block;
                margin-right: 10px;
            }
            p{
                font-weight: 600;
                font-size: 20px;
                color: #0C0D0E;
                margin-bottom: 0px;
            }
        }
        .jiben{
            .infolist{
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
                .userinfo{
                    width: 32.5%;
                    height: 250px;
                    background: url('../../../assets/images/tongjibg.png') no-repeat center;
                    background-size: 100% 100%;
                    .touxiang{
                        img{
                            width: 90px;
                            height: 90px;
                            margin: 20px auto;
                            border-radius: 50%;
                        }
                        p{
                            font-weight: 500;
                            font-size: 17px;
                            color: #010101;
                        }
                    }
                    .tongji{
                        display: flex;
                        justify-content: space-between;
                        width: 60%;
                        margin: 20px auto;
                        .tjitem{
                            span{
                                font-weight: 400;
                                font-size: 14px;
                                color: #787878;
                            }
                            p{
                                font-weight: 500;
                                font-size: 24px;
                                color: #010101;
                            }
                        }
                    }
                }
                .retitle1{
                    display: flex;
                    align-items: center;
                    span{
                        width: 4px;
                        height: 18px;
                        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                        border-radius: 7px;
                        display: block;
                        margin-right: 10px;
                    }
                    p{
                        font-weight: 600;
                        font-size: 20px;
                        color: #0C0D0E;
                        margin-bottom: 0px;
                    }
                }
                .yikaitong{
                    width: 32%;
                    height: 240px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 12px 0px rgba(0,69,207,0.1);
                    border-radius: 8px;
                    padding: 20px;
                    text-align: left;
                    li{
                        margin-left: 20px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #787878;
                        padding-top: 10px;
                    }
                    li::marker{
                        color: #3F8CFF;
                    }
                }
                .renkebanji{
                    width: 32%;
                    padding: 20px;
                    height: 240px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 12px 0px rgba(0,69,207,0.1);
                    border-radius: 8px;
                    .tealist{
                        text-align: left;
                        li{
                            font-weight: 400;
                            font-size: 14px;
                            color: #787878;
                            padding-top: 10px;
                        }
                        li::marker{
                            color: #3F8CFF;
                        }
                        p{
                            font-weight: 400;
                            font-size: 14px;
                            color: #787878;
                            margin-left: 10px;
                            padding-top: 10px;
                        }
                    }
                }
            }
        }
        .biaoxian{
            margin-top: 60px;
            .table-box{
                margin-top: 10px;
            }
            /deep/ .ant-table-thead > tr > th{
                background: #59ADFF;
                color: #FFFFFF;
                border: 1px solid #FFFFFF;
            }
            /deep/ .ant-table-tbody > tr > td{
                background: #F4F9FE;
                border: 1px solid #FFFFFF;
            }
        }
        .zuoyepigai{
            .retitle2{
                display: flex;
                align-items: center;
                .re-left{
                    display: flex;
                    align-items: center;
                    span{
                        width: 4px;
                        height: 18px;
                        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                        border-radius: 7px;
                        display: block;
                        margin-right: 10px;
                    }
                    p{
                        font-weight: 600;
                        font-size: 20px;
                        color: #0C0D0E;
                        margin-bottom: 0px;
                    }
                }
                .re-right{
                    margin-left: 45px;
                }
            }
            .chartlist{
                display: flex;
                justify-content: space-between;
            }
            .box1{
                width: 836px;
                margin-top: 10px;
            }
            .box2{
                width: 540px;
            }
        }
        .shangke{
            margin-top: 60px;
        }
    }
}
</style>